// 事件对象
// 获取事件对象，阻止a标签的默认行为

// 导入react和react-dom
import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  // event e
  handlerClick(e, num) {
    // e获取事件对象
    console.log('e----->', e, num);
    // // preventDefault()阻止a标签的默认行为
    e.preventDefault();
  }
  render() {
    return (
      <div>
        {/* a标签自带的跳转功能 */}
        <a href="http://www.bai.com" onClick={this.handlerClick}>
          点我跳转百度
        </a>
        |{/* 行内完整写法 */}
        <a
          href="http://www.bai.com"
          onClick={(e) => {
            this.handlerClick(e, 999);
          }}
        >
          点我跳转百度2
        </a>
        |{/* 行内完整写法2 */}
        <a href="http://www.bai.com" onClick={(e) => this.handlerClick(e, 99)}>
          点我跳转百度3
        </a>
      </div>
    );
  }
}
// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
